<template>
	<nav class='ex h fxm tc nav-top-list' style='color:rgba(255,255,255,.9)'>
		<template v-for='(v,i) of data' :key='v.name'>
			<li class='fxmc h cp' style='width:80px' :class='{active:v.name === indexName}' v-if="v.name !== 'person'" @click='onClick(v)'>
				<div>
					<div class='fxmc' style='height:20px'><i :class='v.icon'></i></div>
					<div class='db mt10 f12'>{{v.title}}</div>
				</div>
			</li>
		</template>
	</nav>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	const router = useRouter()
	/* --------------------------- image --------------------------- */
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		data: { type:Array, default: [ ] },
		indexName: String
	})
	
	const emit = defineEmits(['click'])
	const onClick = value => {
		emit('click', value)
	}
	
</script>
<style scoped>
	.nav-top-list .active{background-color: rgba(255,255,255,.2);}
</style>